<template>
  <div>

    <table>
      <tr>
        <th><input type="checkbox" v-model="checked" @change="qx" />全选</th>
        <th></th>
        <th>商品名称</th>

        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td><input type="checkbox" v-model="item.check" @change="qx1" /></td>
        <td>
          <img :src="`http://47.115.85.237:3000/${item.productImg}`" alt="" />
        </td>
        <td>{{ item.productName }}</td>

        <td>{{ item.price }}</td>
        <td>
          <el-input-number v-model="item.num" :min="1"></el-input-number>
        </td>
        <td>{{ item.price * item.num }}</td>
        <td><el-button @click="del(item.productID)"  icon="el-icon-delete"></el-button></td>
      </tr>    

    </table>
    <div v-show="!list.length" class="d">
      <img src="../../public/1.png" alt="" class="d">
    </div>
      <span>总价{{ zj }} </span>
      <span>总数{{ zs }} </span>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  // 组件注册
  components: {},
  // 父组件传参
  props: {},
  // 变量声明
  data() {
    return {
      list: [],
      checked: false,
    };
  },
  // Vue实例创建完成以后执行 数据可用
  created() {
    this.getadd();
  },
  // Vue模板挂载完毕以后执行  DOM节点加载完毕了（可以获取节点了）
  mounted() {},
  // keepalive 缓存进入执行
  activited() {},
  // vue组件更新完毕以后执行
  update() {},
  // 定义事件
  methods: {
    async getadd() {
      let res = await this.$axios.post(
        "api/user/shoppingCart/getShoppingCart",
        { user_id: sessionStorage.getItem("token") }
      );
      console.log(res)
      let { shoppingCartData } = res.data;
      console.log(shoppingCartData);
      this.list = shoppingCartData

    },
    qx(ev) {
      let ced = ev.target.checked;
      // console.log(ced)
      this.list.map((item) => {
        return (item.check = ced);
      });
    },
    qx1() {
      let checknum = 0;
      this.list.forEach((item) => {
        if (item.check == true) {
          checknum++;
        }
      });
      if (checknum == this.list.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
   async del(id) {
   let res =  await this.$axios.post("api/user/shoppingCart/deleteShoppingCart",{"user_id":sessionStorage.getItem("token"),"product_id":id});
   console.log(res)
   let { code , msg } = res.data
   if(code =="001"){
     this.$message.success(msg)
     this.getadd() 
   }else{
     this.$message.error(msg)
   }
    },
  },
  // 过滤器
  filter: {},
  // 计算属性
  computed: {

        // 总价 
    zj() {
      let sun = 0
      this.list.filter(item => {
        if (item.check == true) {
           return sun += item.num * item.price
        }
       
      })
      return sun
    },
            // 总数 
    zs() {
      let sun = 0
      this.list.filter(item => {
        if (item.check == true) {
          return sun += item.num 
        }

      })
      return sun
    }
  },
  beforeRouteEnter(to, from, next) {
    let token = sessionStorage.getItem("token");
    // console.log(token)
    if (token == null) {
      next("/");
      alert("请先登录");
    }
    next();
  },
  // 监听属性
  watch: {},
};
</script>

<style scoped>
tr {
  width: 100%;
}
th {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
td {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
img {
  width: 100px;
}
.d{
  width: 100%;
  height: 600px;
}
</style>
